<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text">
    </div>
    <!-- js原生实现双向绑定
        1. 数据 => 视图   数据一旦发生变化 视图会使用最新的数据进行更新
        2. 视图 => 数据   视图一旦发生变化 会把视图当前用户输入的最新的值 反向影响到数据
    -->

    <script>
        // 1. 数据 => 视图
        // 本质：如何知道数据变化了
        
        // let info = {
        //     name: '张三'
        // }
        // info.name = '李四'
        let info = {}
        let _name = '' // 中间变量，让 get 和 set 产生关联
        Object.defineProperty(info, 'name', {
            // 获取 info.name属性时会执行get函数
            // get函数的 return值就是你获取到的值  set函数中的值/视图输入框中的值
            get() {
                return _name
            },
            // 修改info.name属性时会执行set函数
            set(value) {
                console.log('name发生变化了', value)
                // 使用最新的数据 value 去更新视图的逻辑
                // 什么是视图更新？ dom操作
                // 使用value 让input元素的value跟着变化
                _name = value
                document.querySelector('#app input').value = value
            }
        })

        // 2. 视图 => 数据  本质：如何拿到当前视图最新的值，通过监听input事件，事件回调中获取到最新的输入值  反向赋值给数据
        document.querySelector('#app input').addEventListener('input', (e) => {
            console.log('视图修改了', e.target)
            console.dir( e.target )
            // 反向赋值
            info.name = e.target.value
        })

        /**
         * 1. 数据响应式 object.defineProperty()  劫持对象属性的API
         * 2. 数据驱动视图 数据变化 视图会使用最新的数据进行更新
         * 3. 如何让视图更新 视图更新离不开dom操作
         * 4. 视图发生变化 指的是用户因为输入 input 对视图的显示进行了修改
         * 5. 视图变化如何拿到当前视图最新的输入内容 基于事件监听 通过回调函数中的事件对象e拿到
         * /

    </script>

</body>
</html>